<template>
	<div class="system-add-dept-container">
		<el-drawer title="新增租户数据库表" v-model="showWindows" @close="onCancel">
			<el-form ref="formRef" :model="tenantDatabases" :rules="rules" size="small" label-width="30%" style="width: 90%">
				<el-form-item label="数据源URL" prop="dsUrl">
					<el-input v-model="tenantDatabases.dsUrl" placeholder="请输入数据源URL" />
				</el-form-item>
				<el-form-item label="登录名" prop="dsUsername">
					<el-input v-model="tenantDatabases.dsUsername" placeholder="请输入登录名" />
				</el-form-item>
				<el-form-item label="登录密码" prop="dsPassword">
					<el-input v-model="tenantDatabases.dsPassword" placeholder="请输入登录密码" />
				</el-form-item>
				<el-form-item label="驱动名称" prop="dsDriverClass">
					<el-input v-model="tenantDatabases.dsDriverClass" placeholder="请输入驱动名称" />
				</el-form-item>
				<el-form-item label="数据源名称" prop="dsName">
					<el-input v-model="tenantDatabases.dsName" placeholder="请输入数据源名称" />
				</el-form-item>
				<el-form-item label="数据源类型" prop="dsType">
					<el-select v-model="tenantDatabases.dsType" placeholder="请输入资源类型" style="width: 100%">
						<el-option label="master" value="1" />
						<el-option label="slave" value="2" />
					</el-select>
				</el-form-item>
        <el-form-item label="归属应用" prop="application">
          <el-select v-model="tenantDatabases.application" placeholder="请选择归属应用" style="width: 100%">
            <el-option :key="val.itemName" :label="val.itemName" v-for="val in application" :value="val.itemCode.substring(val.itemCode.lastIndexOf('.') + 1)" />
          </el-select>
        </el-form-item>
			</el-form>
			<div class="el-drawer__footer">
				<el-button @click="onCancel" size="small">取 消</el-button>
				<el-button type="primary" @click="onSubmit" size="small">新 增</el-button>
			</div>
		</el-drawer>
	</div>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { addTenantDatabases } from '/@/api/tenant/database/index';
import { ElMessage } from 'element-plus';
import {getDictItemByCode} from "/@/api/sys/dict";

export default {
	name: 'addTenantDatabases',
	emits: ['initTableData'],
	props: {},
	setup(props, context) {
		const formRef = ref();

		const state = reactive({
			showWindows: false,
      application:[],
			tenantDatabases: {
				dsUrl: '',
				dsUsername: '',
				dsPassword: '',
				dsDriverClass: '',
				dsName: '',
				dsType: null,
				tenantId: '',
        application:'',
			},
			rules: {
				dsUrl: [{ required: true, message: '请输入数据源URL', trigger: 'blue' }],
				dsUsername: [{ required: true, message: '请输入登录名', trigger: 'blue' }],
				dsPassword: [{ required: true, message: '请输入登录密码', trigger: 'blue' }],
				dsDriverClass: [{ required: true, message: '请输入驱动名称', trigger: 'blue' }],
				dsName: [{ required: true, message: '请输入数据源名称', trigger: 'blue' }],
				dsType: [{ required: true, message: '请输入数据源类型', trigger: 'blue' }],
        application: [{ required: true, message: '请输入数据源类型', trigger: 'blue' }],
			},
		});

    /**
     * 初始化授权的服务
     */
    const initOauthService =()=>{
      getDictItemByCode("sys.oauth.service").then((res:any)=>{
        state.application = res.data
      });
    }

		//打开添加窗口
		const openWindows = (tenantId: any) => {
			state.tenantDatabases.tenantId = tenantId;
			state.showWindows = true;
      initOauthService()
		};

		//取消
		const onCancel = () => {
			formRef.value.resetFields();
			state.showWindows = false;
		};

		//提交
		const onSubmit = () => {
			formRef.value.validate((valid: any) => {
				if (valid) {
					addTenantDatabases(state.tenantDatabases).then((res: any) => {
						if (res.code == 200) {
							onCancel();
							context.emit('initTableData');
						} else {
							ElMessage.error(res.message);
						}
					});
				}
			});
		};

		return {
			formRef,
			openWindows,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
};
</script>

<style scoped></style>
